<template>
  <div class="page-login">
    <h1>登录页面</h1>

    <el-form class="form" ref="myForm" label-width="80" :model="model" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="model.username" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="model.password" type="password" />
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <!-- <el-input v-model="model.code">
          <template #append>
            <Captcha />
          </template>
        </el-input> -->

        <el-input v-model="model.code" class="captcha-input" @keyup.enter="handleLogin" />
        <Captcha ref="myCaptcha" />
      </el-form-item>
      <el-form-item label-width="0">
        <el-button class="btn" type="primary" :loading="loading" @click="handleLogin">
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
// 引入 useRouter
import { useRouter } from 'vue-router'
// 引入验证码组件
import Captcha from './components/captcha.vue'
// import type 语句，专门用户导入 模块中导出的 类型定义
// 如果从一个包中，既要引入 类型定义 又要引入其他的非类型定义的东西，则可以如下方式编写。
import { ElMessage, type FormInstance } from 'element-plus'
// 引入 useUserStore
import { useUserStore } from '@/stores/user'

defineOptions({
  name: 'login'
})

// 表单数据
const model = reactive({
  username: 'admin',
  password: '123456',
  code: ''
})

// 表单校验规则
const rules = {
  username: [
    { required: true, message: '请输入用户名' }
    // { min: 5, max: 10, message: '5 <= 长度 <= 10' },
    // { pattern: /^1(.*)$/, message: '请已1开头' },
    // { type: 'email', message: '请输入邮箱格式' }
  ],
  password: [{ required: true, message: '请输入密码' }],
  code: [{ required: true, message: '请输入验证码' }]
}

// userStore
const userStore = useUserStore()
// 路由器的实例对象
const router = useRouter()

const myForm = ref<FormInstance | null>(null)
// 为组件模板引用标注类型
//    1. typeof 组件    获取组件的类型
//    2. InstanceType 内置泛型工具  获取组件类型的实例类型
const myCaptcha = ref<InstanceType<typeof Captcha> | null>(null)

// 是否正在登录中
const loading = ref<boolean>(false)
// 登录方法
const handleLogin = async () => {
  // 1. 触发表单校验
  await myForm.value?.validate()
  // 2. 获取相关的参数
  const payload = {
    username: model.username,
    password: model.password,
    captchaId: myCaptcha.value?.getCaptchaId(),
    verifyCode: model.code
  }
  try {
    loading.value = true
    // 3. 调用 userStore.login() 方法
    await userStore.login(payload)
    // 4. 登录成功？？？
    loading.value = false
    ElMessage.success('登录成功')
    // 5. 跳转到首页，使用编程式导航，
    //    要使用到 this.$router 但是当前不是选项式没有 this ,可以使用 vue-router 提供的 useRouter() 组合式函数 .
    //    相应的如果要获取 this.$route ，可以使用 vue-router 提供的 useRoute() 组合式函数
    router.replace('/')
  } catch (error) {
    loading.value = false
    // 登录失败，需要刷新验证码
    myCaptcha.value?.refresh()
  }
}
</script>

<style lang="scss" scoped>
.page-login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #ccc;
}
.form {
  padding: 16px;
  width: 300px;
  border-radius: 10px;
  background-color: #fff;
}

.btn {
  display: block;
  margin: 0 auto;
}

.captcha-input {
  flex: 1;
}

// .el-form-item {
//   background-color: red;
// }

// :deep(.el-form-item__label) {
//   color: #fff;
// }
</style>
